<html>
<head></head>
<body>
<script type="text/javascript" src="http://jindo.dev.naver.com/collie/deploy/collie.min.js"></script>

<div id="container" class="container"></div>
<script type="text/javascript">
var setY = 170;
var layer = new collie.Layer({
	width : 300,
 	height : 300
}).attach({
	click : function (e) {
		if (!oTimerPang.isPlaying()) {
			oTimerPang.start();
		}
	}
});

collie.ImageManager.add({
	"ground" : "http://jindo.dev.naver.com/collie/img/small/ground.png",
	"sky" : "http://jindo.dev.naver.com/collie/img/small/sky.png",
	"pang" : "/images/animation/pangMove.png",
	"rabbit":"/images/animation/rabbit.png"
});

var oBackground = new collie.DisplayObject({
	x : 0,
	y : 0,
	width : 300,
 	height : 300,
	backgroundRepeat : "repeat", // Repeat X-Axis
	backgroundImage : "sky"
}).addTo(layer);

var oGround = new collie.MovableObject({
	x : 0,
	width : 320 * 2, // Using Double width for continuously horizontal move.
	height : 88,
	velocityX : -150,
	backgroundRepeat : "repeat-x", // Repeat X-Axis
	rangeX : [-320, 0], // This object can move from first position to second position.
	positionRepeat : true, // This object move the other side when It's on one end of the edge.
	backgroundImage : "ground"
}).bottom(0).addTo(layer);

var oAvatar = new collie.DisplayObject({
}).addTo(layer);

oAvatarWalk = new collie.DisplayObject({
	x : 0,
	y : 100,
	width : 129.4,
	height : 165,
	backgroundImage : "rabbit"
}).addTo(layer);

var oAvatarPang = new collie.DisplayObject({
	x : 100,
	y : setY,
	width : 107,
	height : 22,
	spriteLength : 6,
	backgroundImage : "pang",
	visible : false
}).addTo(layer);

var oTimer = collie.Timer.cycle(oAvatarWalk, "18fps", {
	to : 8,
	loop : 0,
	onStart : function () {
		oAvatarWalk.set("visible", true);
		oAvatarPang.set("visible", false);
	}
});

var oTimerPang = collie.Timer.cycle(oAvatarPang, "18fps",{
	to : 6,
	loop : 1,
	useAutoStart:false,
	onStart : function(){
		oAvatarWalk.set("visible", true);
		oAvatarPang.set("visible", true);
	},

	onComplete : function () {
		oTimer.start();
	}
});

collie.Renderer.addLayer(layer);
collie.Renderer.load(document.getElementById("container"));
collie.Renderer.start();

</script>

</body>
</html>